<template>
  <div class="main-content" style="padding-top: 60px">
    <div style="display: flex; grid-gap: 20px">
      <div style="width: 150px; height: 515px; overflow: auto" class="card">
         <div class="search-history-header">热榜</div>
        <div
          class="category-item"
          :class="{ 'category-item-actice': '最新' === current }"
          @click="select('最新')"
        >最新</div>
        <div
          class="category-item"
          :class="{ 'category-item-actice': '最热' === current }"
          @click="select('最热')"
        >最热</div>
      </div>
      <!-- 中间帖子内容 -->
      <div
        style="flex: 1; display: flex; height: 515px; overflow: auto"
        class="card"
      >
        <!-- 帖子 -->
        <div
          style="flex: 1; text-align: left; padding: 20px; position: relative"
        >
          <div style="height: 85%; width: 100%">
            <div
              v-for="item in posts"
              :key="item.postId"
              style="
                display: flex;
                grid-gap: 15px;
                padding: 20px;
                border: 2px solid #1890ff;
                border-radius: 10px;
                margin-bottom: 26px;
              "
              class="float-div"
              @click="push(item.postId)"
            >
              <div style="flex: 1">
                <div class="oneline petForumTitle" @click="push(item.postId)">
                  {{ item.title }}
                </div>
                <div
                  style="
                    color: #666;
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 1.4em;
                    height: 2.8em;
                  "
                  class="towline"
                >
                  {{ item.introduction }}
                </div>
                <div
                  style="
                    display: flex;
                    align-items: flex-start;
                    margin-top: 10px;
                  "
                >
                  <div style="flex: 1; font-size: 12px; display: flex">
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-user"></i>{{ item.realName }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <i class="el-icon-view"></i>{{ item.views }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-star-off"></i>{{ item.favorites }}
                    </span>
                    <span style="flex: 1" class="oneline">
                      <!-- 同样的方式处理其他的 span -->
                      <i class="el-icon-like"></i>{{ item.likes }}
                    </span>
                  </div>

                  <div
                    style="width: fit-content; margin-top: -5px"
                    class="oneline"
                  >
                    <el-tag
                      type="primary"
                      v-for="(item1, index) in JSON.parse(item.tag)"
                      :key="index"
                      style="margin-right: 10px; font-size: 12px"
                      >{{ item1 }}</el-tag
                    >
                  </div>
                </div>
              </div>
              <div style="width: 175px">
                <img
                  style="width: 100%; height: 100px; border-radius: 5px"
                  :src="item.mediaLink"
                  alt=""
                />
              </div>
            </div>

            <div
              v-if="total === 0"
             style="
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
              "
            >
              <el-empty :image-size="0" />
            </div>
            <!-- 页眉 -->
          </div>
        </div>
      </div>
      <!-- 右边优秀作者 -->
      <div
        style="width: 260px; height: 515px; overflow: auto"
        class="card"
      >
          <div class="search-history-header">优秀作者</div>
          <div style="display: flex; border-bottom: #1890ff solid 1px;margin-bottom: 15px;" v-for="(user,index) in users" :key="index">
              <div style="flex:1;text-align: left;padding-top: 17px;">
                <span style="font-size: large;font-weight: bold;">{{ index+1 }}.</span>
              </div>
              <div style="flex: 6;">
                <el-image style="width: 60px;height: 60px;border-radius: 50%;" :src="user.avatar" />
              </div>
              <div style="flex:5;text-align: left;padding-top: 13px;">
                <span style="font-size: large;font-weight: bold;">{{ user.realName }}</span>
              </div>
          </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination" style="width: 95%">
      <div>总共：{{ total }}条</div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next,jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
//请求
import request from "@/utils/request";

export default {
  name: "Hot",
  components: {},
  data() {
    return {
      // 当前选中类型
      current: "最新",
      pageNum: 1,
      pageSize: 3,
      posts: [], //左边部分帖子
      total: 0, //总数
      currentPage: 1, //用于展示当前页数
      users:[], //优秀作者
    };
  },
  mounted() {},
  created() {
    this.loadPage();
    this.loadUser();
  },
  methods: {
    select(type) {
      this.current = type;
      if(type==='最新')
        this.loadPage();
      else
        this.loadHotPage();
    },
    //分页查询帖子
    loadPage() {
      let url =
        "/post/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize;
      request.post(url).then((res) => {
        this.posts = res.data.list;
        this.size = res.data.size;
        this.total = res.data.total;
      });
    },
    //分页查询热帖子
    loadHotPage() {
      let url =
        "/post/pageHot?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize;
      request.post(url).then((res) => {
        this.posts = res.data.list;
        this.size = res.data.size;
        this.total = res.data.total;
      });
    },
    loadUser(){
      request.get("/userinfo/excellent").then((res)=>{
        this.users=res.data;
      })
    },
    //改变每页记录数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //当前用户选择的每页显示几条记录呢
      this.pageSize = val;
      this.currentPage = 1;
      this.pageNum = 1;
      //重新调用
      this.loadPage();
    },
    //翻页(点击页码)
    handleCurrentChange(val) {
      this.currentPage = val;
      this.pageNum = val;
      this.loadPage(); // 获取新的数据
    },
    //导航到
    push(postId) {
      this.$router.push(`/user/postDetail?postId=${postId}`);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.main-content {
  width: 85%;
  margin: 5px auto;
}
.search-history-header {
  font-weight: bold;
  font-size: 19px;
  margin-bottom: 20px;
}
/* 防止缩小后样式发生改变 */
@media screen and (max-width: 768px) {
  .main-content {
    width: 100%; /* 在小屏幕下铺满整个宽度 */
    padding: 0 10px; /* 添加一些 padding 来保持内容与屏幕边缘的距离 */
  }
}
.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-actice {
  background-color: #1890ff;
  color: #fff;
  border-radius: 5px;
}
.petForumTitle {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.petForumTitle:hover {
  color: #1890ff;
}
/* 超双行省略 */
.towline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
}
/* 超单行省略 */
.oneline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 超出几行省略 */
  overflow: hidden;
}
/* 翻页 */
.pagination {
  text-align: center;
  margin-top: 20px; /* 根据需要调整与帖子内容的间距 */
}
/* 浮动动画 */
.float-div {
  animation: floatAnimation 3s infinite ease-in-out; /* 持续浮动的动画 */
  cursor: pointer;
}
.float-div:hover {
  animation-play-state: paused; /* 鼠标移入时停止动画 */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); /*起到一个强调的效果*/
}
@keyframes floatAnimation {
  0% {
    transform: translate(0px, 0px); /* 初始位置 */
  }
  50% {
    transform: translate(-5px, -5px); /* 向左上方浮动 */
  }
  100% {
    transform: translate(0px, 0px); /* 回到初始位置 */
  }
}
/* 页眉 */
.page-number {
  position: fixed;
  bottom: 16%;
  left: 15%;
  transform: translate(0, 100%);
  color: #666;
  font-size: 14px;
}
/* 滚动条 */
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
  max-height: 5px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #1890ff;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
</style>
